<template>
  <div class="layout-padding card-tabs font-mono">
    <div class="layout-padding-auto layout-padding-view">
      <el-card shadow="hover" class="mb-2 padding-unset pt-3 pl-6" style="flex: 0 0 58px; padding: 0">
        <el-form :inline="true" :model="from" class="align-center search-form ml-2 mb-2">
          <el-form-item class="label mt-4" :label="$t('outPutData.selectMonth')">
            <el-date-picker
                style="width: 220px"
                v-model="from.time"
                type="month"
                format="YYYY-MM"
                value-format="YYYY-MM"
                :placeholder="$t('tenant.currentMonth')"
                class="custom-date-picker"
            />
          </el-form-item>
          <el-button icon="Search" class="buttons" type="primary" @click="getEndSerch">{{
              $t('common.queryBtn')
            }}
          </el-button>
          <el-button icon="Refresh" class="buttons" @click="getReset">{{ $t('common.resetBtn') }}</el-button>
        </el-form>
      </el-card>
      <splitpanes class="default-theme" style="height: calc(100% - 60px)">
        <pane size="50">
          <div class="layout-padding-auto layout-padding-view">
            <el-tabs model-value="first">
              <el-tab-pane name="first">
                <template #label>
                  <span class="ml-0.5"> <el-icon><DocumentChecked/></el-icon> 产出物料 </span>
                </template>
              </el-tab-pane>
            </el-tabs>
            <el-table
                ref="tableRef"
                border
                id="out-table"
                :data="endList"
                :fit="true"
                stripe
                table-layout="fixed"
                header-align="center"
                v-loading="endLoading"
                highlight-current-row
                @selection-change="selectionChangeHandle"
                @row-click="clickRow"
                style="width: 100%; height: 100%"
                :header-cell-style="{
								color: '#1e293b',
								textAlign: 'center',
								fontWeight: '600',
								background: 'linear-gradient(to bottom, #f8fafc, #f1f5f9)',
								borderColor: '#e2e8f0',
								height: '30px',
							}"
                :cell-style="{
								textAlign: 'center',
								color: '#334155',
								borderColor: '#e2e8f0',
								background: '#fff',
								height: '30px',
							}"
            >
              <el-table-column type="index" width="50" align="center"/>
              <el-table-column prop="fmaterialcode" width="160" :label="$t('outPutData.fmaterialcode')">
                <template #default="scope">
                  <el-tag type="primary" effect="light">{{ scope.row.fmaterialcode }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="fmaterialname" width="160" :label="$t('outPutData.fmaterialname')">
                <template #default="scope">
                  {{ scope.row.fmaterialname }}
                </template>
              </el-table-column>
              <el-table-column prop="bomversion" width="280" :label="$t('outPutData.bomversion')"/>
              <el-table-column prop="outputqty" width="180" :label="$t('outPutData.outputqty')">
                <template #default="scope">
                  <el-tag type="success" effect="light">
                    {{ scope.row.outputqty == ' ' ? '--' : scope.row.outputqty }}
                  </el-tag>
                </template>
              </el-table-column>
              <!--							<el-table-column prop="ismore" width="100" :label="$t('outPutData.ismore')" />-->
              <el-table-column prop="ismore" width="100" :label="$t('outPutData.ismore')">
                <template #default="{ row }">
                  <el-tag
                      :type="row.ismore === 'N' ? 'success' : 'dark'"
                      :effect="row.ismore === 'Y' ? 'danger' : 'light'"
                  >
                    {{ row.ismore }}
                  </el-tag>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
                :current-page="data.endpage"
                :page-size="data.endSize"
                :page-sizes="[10, 20, 50, 100]"
                background
                class="custom-pagination"
                layout="total, sizes, prev, pager, next, jumper"
                :total="data.endListTotal"
                @size-change="handleEndSizeChange"
                @current-change="handleEndCurrentChange"
            />
          </div>
        </pane>
        <pane size="50">
          <div class="layout-padding-auto layout-padding-view">
            <el-tabs model-value="first">
              <el-tab-pane name="first">
                <template #label>
                  <span class="ml-0.5"><el-icon><TrendCharts/></el-icon> 投入物料 </span>
                </template>
              </el-tab-pane>
            </el-tabs>
            <el-table
                ref="tableRef"
                border
                id="out-table"
                :data="bottomList"
                :fit="true"
                table-layout="fixed"
                header-align="center"
                v-loading="bottomLoading"
                style="width: 100%; height: 100%"
                @selection-change="selectionChangeHandleBOT"
                :header-cell-style="{
								color: '#1e293b',
								textAlign: 'center',
								fontWeight: '600',
								background: 'linear-gradient(to bottom, #f8fafc, #f1f5f9)',
								borderColor: '#e2e8f0',
								height: '30px',
							}"
                :cell-style="{
								textAlign: 'center',
								color: '#334155',
								borderColor: '#e2e8f0',
								background: '#fff',
								height: '30px',
							}"
            >
              <el-table-column type="index" width="50" align="center"/>
              <el-table-column prop="materialcode" :label="$t('outPutData.materialcode')" width="160"
                               show-overflow-tooltip>
                <template #default="scope">
                  <el-tag type="primary" effect="light">{{ scope.row.materialcode }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="materialname" width="160" :label="$t('outPutData.materialname')">
                <template #default="scope">
                  {{ scope.row.materialname }}
                </template>
              </el-table-column>
              <el-table-column prop="molecule" width="160" :label="$t('outPutData.molecule')"/>
              <el-table-column prop="denominator" width="160" :label="$t('outPutData.denominator')"/>
              <el-table-column prop="proportion" width="160" :label="$t('outPutData.proportion')"/>
              <el-table-column prop="outputqty" width="160" :label="$t('outPutData.outputqty')"/>
              <el-table-column prop="standardqty" width="160" :label="$t('outPutData.standardqty')"/>
              <el-table-column prop="actualqty" width="160" :label="$t('outPutData.actualqty')"/>
              <el-table-column prop="differenceqty" width="160" :label="$t('outPutData.differenceqty')">
                <template #default="{ row }">
                  <el-tag
                      :type="getTagType(row.differenceqty)"
                      :effect="getTagEffect(row.differenceqty)"
                      class="custom-diff-tag"
                  >
                    {{ formatDifferenceQty(row.differenceqty) }}
                  </el-tag>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
                :current-page="data.bottompage"
                :page-size="data.bottomSize"
                :page-sizes="[10, 20, 50, 100]"
                background
                class="custom-pagination"
                layout="total, sizes, prev, pager, next, jumper"
                :total="data.bottomListTotal"
                @size-change="handlebottomSizeChange"
                @current-change="handlebottomCurrentChange"
            />
          </div>
        </pane>
      </splitpanes>
    </div>
    <editDialog ref="editDialogRef"/>
    <materialDialog ref="materialDialogRef"/>
  </div>
</template>

<script setup>
import '/@/style/tailwind.css';
import {getOutPutDataPage, getInPutDataPage} from '/@/api/platform/report/wmsOutputdata';
import {useI18n} from 'vue-i18n';

const {t} = useI18n();
const from = reactive({
  time: [],
});
const editDialogRef = ref();
const materialDialogRef = ref();

const getEndSerch = () => {
  data.endpage = 1;
  getEndList();
  bottomList.value = [];
  data.bottomListTotal = 0;
};

// 获取当前月份的函数
const getCurrentMonth = () => {
  const date = new Date();
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  return `${year}-${month}`;
};

// 格式化差异数量
const formatDifferenceQty = (value) => {
  return value === ' ' ? '--' : value;
};

// 根据数值获取标签类型
const getTagType = (value) => {
  if (value === ' ') return 'info';
  return value >= 0 ? 'success' : 'danger';
};

// 根据数值获取标签效果（修改点：0 使用浅色）
const getTagEffect = (value) => {
  if (value === ' ') return 'light';
  return value >= 0 ? 'light' : 'dark'; // 当值大于等于0时使用浅色
};

const options = ref([
  {label: 'All', value: ''},
  {label: t('qms.open'), value: 'po_open'},
  {label: t('qms.close'), value: 'po_close'},
]);
//给options默认值为po_open
from.status = 'po_open';

const data = reactive({
  endpage: 1,
  endSize: 20,
  endListTotal: 0,
  bottompage: 1,
  bottomSize: 20,
  bottomListTotal: 0,
  id: '',
});

const endList = ref([]);
const endLoading = ref(false);
const bottomList = ref([]);
const bottomLoading = ref(false);
const topRowList = ref([]);
const botRowList = ref([]);
const getEndList = async () => {
  endLoading.value = true;
  try {
    const params = {
      current: data.endpage,
      size: data.endSize,
      currentMonth: (from && from.time) || '',
    };
    const res = await getOutPutDataPage(params);
    endList.value = res.data.records;
    data.endListTotal = res.data.total;
  } catch (e) {
    console.log(e);
  } finally {
    endLoading.value = false;
  }
};
const getBottomList = async () => {
  bottomLoading.value = true;
  try {
    const params = {
      current: data.bottompage,
      size: data.bottomSize,
      fmaterialcode: data.fmaterialcode,
      bomversion: data.bomversion,
      outputqty: data.outputqty,
      attribute3: data.attribute3,
      id: data.id,
    };
    const res = await getInPutDataPage(params);
    bottomList.value = res.data.records;
    data.bottomListTotal = res.data.total;
  } catch (e) {
    console.log(e);
  } finally {
    bottomLoading.value = false;
  }
};

const handleEndSizeChange = (val) => {
  data.endSize = val;
  getEndList();
};
const handleEndCurrentChange = (val) => {
  data.endpage = val;
  getEndList();
};
const handlebottomSizeChange = (val) => {
  data.bottomSize = val;
  getBottomList();
};
const handlebottomCurrentChange = (val) => {
  data.bottompage = val;
  getBottomList();
};
const selectionChangeHandle = (objs) => {
  topRowList.value = objs;
};
const selectionChangeHandleBOT = (objs) => {
  botRowList.value = objs;
};
// 点击行的时候触发
const clickRow = (row) => {
  data.poCode = row.poCode;
  data.poLine = row.poLine;
  data.fmaterialcode = row.fmaterialcode;
  data.bomversion = row.bomversion;
  data.outputqty = row.outputqty;
  data.attribute3 = row.attribute3;
  getBottomList();
};

const getReset = () => {
  from.time = getCurrentMonth();
  getEndList();
};
onMounted(() => {
  from.time = getCurrentMonth();
  getEndList();
});
</script>
